<template>
  <div>
    <el-form :model="params" ref="ruleForm" label-position="right" size="small" label-width="110px" class="base-search-more">
      <el-row >
        <el-col :span="6" v-if="$store.state.showAgent">
          <el-form-item label="区域">
            <agent-list style="width: 100%" :agentids="params.agentIds" @listenToChildEvent="getAentId" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="订单号">
            <el-input style="width: 100%" placeholder="请输入订单号" v-model="params.orderNo" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="支付方式">
            <el-select style="width: 100%" v-model="params.paymethod" placeholder="请选择" clearable>
              <el-option label="支付宝app支付" value="0"></el-option>
              <el-option label="微信app支付" value="1"></el-option>
              <el-option label="余额支付" value="2"></el-option>
              <el-option label="微信公众号" value="3"></el-option>
              <el-option label="微信小程序支付" value="4"></el-option>
              <!--<el-option label="微信小程序支付" value="5"></el-option>-->
              <el-option label="微信H5支付" value="6"></el-option>
              <el-option label="支付宝wap支付" value="7"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="日期">
            <pt-date-picker v-model="params.date" :shortcuts="[{ text: '今天', start: 0, end: 0},{ text: '近七天', start: -7, end: 0}, {text: '近一个月', start: -30, end: 0}]" />
          </el-form-item>
        </el-col>
        <el-col :span="$store.state.showAgent ? 24 : 6" style="text-align: right">
          <el-form-item label-width="0">
            <el-button type="primary" icon="el-icon-search" @click="handleSizeChange(10)">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="base-table-wrap">
      <el-table :data="tableData.list" stripe style="width: 100%">
        <el-table-column prop="orderNo" label="订单号" min-width="120" align="left"></el-table-column>
        <el-table-column label="客户信息" min-width="160" align="left">
          <template slot-scope="scope">
            <div>{{scope.row.cuseraddress.name||'未知名称'}} | {{scope.row.cuseraddress.mobile }}</div>
            <div>收货地址：{{scope.row.cuseraddress.useraddress}}{{scope.row.cuseraddress.address }}</div>
          </template>
        </el-table-column>
        <el-table-column label="支付信息" min-width="100" align="center">
          <template slot-scope="scope">
            <div>{{scope.row.amountPaid?scope.row.amountPaid/100:0}}{{comConfig.unit}}</div>
            <div>{{ scope.row.paid ? paySatus(scope.row.channel): '未支付'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="shopperName" label="接单骑手" min-width="100" align="center"></el-table-column>
        <el-table-column prop="tip" label="打赏金额" min-width="80" align="center"></el-table-column>
        <el-table-column label="类型" min-width="120" align="center">
          <template slot-scope='scope'>
            {{scope.row.type|capitalize1}}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="付款时间" min-width="140" align="center"></el-table-column>
        <el-table-column label="订单状态" min-width="100" align="center">
          <template slot-scope='scope'>
            {{scope.row.status|capitalize}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button class="el-text-check" @click="handleClick(scope.row.id)" type="text" size="mini">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 复制 el-table v-loading  v-loading无法快速响应 所有自定义 -->
      <div class="base-directives-loading" v-show="isloadingTable">
        <div class="el-loading-spinner">
          <svg viewBox="25 25 50 50" class="circular">
            <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
          </svg>
        </div>
      </div>
      <div class="base-pagination clearfix">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="newPage" :pageSize="pageSize" :total="tableData.total"
          :page-sizes="[10, 20, 30, 40]" background layout="total,sizes, prev, pager, next, jumper" />
      </div>
    </div>
    <el-dialog title="订单信息" v-dialogDrag :visible.sync="dialogTableVisible" width="900px" :close-on-press-escap="true">
      <div class="flex d-table" id="d-table" style="position: relative">
        <div class="base-directives-loading" v-show="diyLoading">
          <div class="el-loading-spinner">
            <svg viewBox="25 25 50 50" class="circular">
              <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
            </svg>
          </div>
        </div>
        <div class="check-l">
          <el-card class="state" shadow="hover">
            <div class="title">订单进度</div>
            <ul class="u-st">
              <li v-for="(item,index) in curOrderlist.orderStatusHistoryList" :key="index">
                <div class="wo">{{item.status|capitalize}}</div>
                <div class="ti">系统：{{item.createTime}}</div>
              </li>
            </ul>
          </el-card>

          <el-card class="state" shadow="hover">
            <div class="title">骑手信息</div>
            <ul class="pay">
              <!-- <li><span class="ti">预计送达时间：</span><span class="wo">{{curOrderlist.distime}}</span></li>-->
              <li><span class="ti">骑手姓名：</span><span class="wo">{{curOrderlist.waiMaiRunfastShopper.name}}</span></li>
              <li><span class="ti">骑手电话：</span><span class="wo">{{curOrderlist.waiMaiRunfastShopper.munber}}</span></li>
              <li><span class="ti">类型:</span><span class="wo">{{curOrderlist.type|capitalize1}}</span></li>
            </ul>
          </el-card>
        </div>
        <div class="check-r">
          <el-card class="msg " shadow="hover">
            <span class="title">订单信息</span>
            <ul class="default flex">
              <li class="flex-row">
                <span class="ti">订单号:</span>
                <span>{{curOrderlist.orderNo}}</span>
              </li>
              <li class="flex-row">
                <span class="ti">支付方式:</span>
                <span>{{curOrderlist.paid?paySatus(curOrderlist.channel) : ''}}</span>
              </li>
              <li class="flex-row">
                <span class="ti">打赏金额:</span>
                <span>{{curOrderlist.tip||0}}{{comConfig.unit}}</span>
              </li>
              <li class="flex-row">
                <span class="ti">优惠券金额:</span>
                <span></span>
              </li>
              <li class="flex-row">
                <span class="ti">实付金额:</span>
                <span>{{curOrderlist.amountPaid?curOrderlist.amountPaid/100:0}}{{comConfig.unit}}</span>
              </li>
              <li class="flex-row">
                 <span class="ti">{{curOrderlist.type == 'QUSONGJIAN' ? '送货位置' : '购买位置'}}:</span>
                 <span>{{curOrderlist.fromAddress || '就近购买'}}</span>
               </li>
            </ul>
          </el-card>
          <el-card class="msg" shadow="hover">
            <span class="title">用户信息</span>
            <ul class="default flex">
              <li class="flex-row">
                <span class="ti">收货人姓名:</span>
                <span>{{curOrderlist.cuseraddress.name}}</span>
              </li>
              <li class="flex-row">
                <span class="ti">收货人电话:</span>
                <span>{{curOrderlist.cuseraddress.mobile}}</span>
              </li>
              <li class="flex-row">
                <span class="ti">注册电话:</span>
                <span>{{curOrderlist.cuseraddress.phone}}</span>
              </li>
              <li class="flex-row" style="width: 100%">
                <span class="ti">收货人地址:</span>
                <span>{{curOrderlist.cuseraddress.useraddress}}{{curOrderlist.cuseraddress.address}}</span>
              </li>
            </ul>
          </el-card>
          <el-card class="msg" shadow="hover">
            <span class="title">物品类型</span>
            <ul class="cuisine">
              <li><span class="ti">配送物品:</span><span>{{curOrderlist.goodsDescription}}</span></li>
              <li><span class="ti">用户备注:</span><span>{{curOrderlist.remark}}</span></li>
              <li><span class="ti">物品重量:</span><span>{{curOrderlist.goodsWeight||0}}kg</span></li>
              <li><span class="ti">配送费用:</span><span>{{(curOrderlist.deliveryCost/100).toFixed(2)}}{{comConfig.unit}}</span></li>
              <li><span class="ti">配送距离:</span><span>{{curOrderlist.distance||0}}M</span></li>
            </ul>
          </el-card>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {getDay, paySatus } from '@/utils/ptkc.js'
  export default {
    data() {
      return {
        paySatus: paySatus,
        curOrderlist: { // 修改 选择数据
          waiMaiRunfastShopper: {},
          cuseraddress: {}
        },
        params: {
          page: 0,
          size: 10,
          agentIds: [], // 区域
          orderNo: '',
          paymethod: '',
          date: ''
        },
        isloadingTable: false, // 表单等待
        diyLoading: true, // 自定义等待
        tableData: {},  // 表单数据
        newPage: 1, // 默认分页
        pageSize: 10, // 分页数量
        dialogTableVisible: false 
      }
    },
    methods: {
      getAentId(item) { //获取子组件传递的区域
        this.params.agentIds = item
      },
      handleClick(id) { //查看/修改订单操作
        this.dialogTableVisible = !this.dialogTableVisible
        this.diyLoading = true
        this.$http.get('/server/paotui/order/info?id=' + id).then(res => {
          if (res.data.success) {
            this.curOrderlist = res.data.data
          }
        }).finally(() => { this.diyLoading = false })
      },
      handleSizeChange(size) { // 切换条数
        this.params.size = size
        this.pageSize = size
        this.newPage = 1
        this.params.page = 0
        this.getTableList()
      },
      handleCurrentChange(page) { // 切换分页
        this.params.page = page - 1
        this.getTableList()
      },
      getTableList() { // 获取订单数据
        this.isloadingTable = true
        const params = { ...this.params }
        params.agentIds = params.agentIds.length > 0 ? params.agentIds.join(',') : ''
        params.date = params.date ? params.date.join(',') : ''
        this.$http.get('/server/paotui/order/list?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
          }
        }).finally(() => { this.isloadingTable = false })
      }
    },
    filters: { // 商品名称
      capitalize(status) {
        const a = ['CREATED', 'CANCELED', 'PAID', 'TAKEN', 'COMPLETED', 'PICKED']
        const b = ['下单', '取消', '付款', '骑手接单', '完成', '已取货',]
        return a.indexOf(status) > -1 ? b[a.indexOf(status)] : '未知'
      },
      capitalize1(type) {
        const a = ['DAIGOU', 'QUSONGJIAN']
        const b = ['代购', '取送件']
        return a.indexOf(type) > -1 ? b[a.indexOf(type)] : '未知'
      }
    },
    mounted() {
      this.getTableList()
    }
  }
</script>
<style scoped>
  @import "/css/check.css";
</style>
